<template>
  <div
    ref="scrollContainer"
    class="table-scroll-container"
    :style="{ height: containerHeight }"
  >
    <!-- 通过插槽传递表格高度给子组件（表格） -->
    <slot :tableHeight="tableHeight" :isReady="isReadyFlag ? true : isReady" />
  </div>
</template>

<script>
export default {
  name: 'TableScrollContainer',
  props: {
    topHeight: {
      type: Number,
      default: 220
    },
    paginationHeight: {
      type: Number,
      default: 50
    },
    isReady: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableHeight: 0
    }
  },
  computed: {
    containerHeight() {
      return `calc(100vh - ${this.topHeight}px)`
    },
    isReadyFlag() {
      return this.tableHeight > 0
    }
  },
  mounted() {
    this.calculateTableHeight()
    window.addEventListener('resize', this.calculateTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateTableHeight)
  },
  methods: {
    calculateTableHeight() {
      if (this.$refs.scrollContainer) {
        const containerHeight = this.$refs.scrollContainer.clientHeight
        this.tableHeight = Math.max(0, containerHeight - this.paginationHeight)
      }
    }
  }
}
</script>

<style scoped>
/* 表格滚动容器样式 */
.table-scroll-container {
  overflow-y: auto; /* 启用垂直滚动 */
  padding-right: 8px; /* 为自定义滚动条预留空间 */
  box-sizing: border-box; /* 确保padding和border包含在元素总宽度内 */
}

/* 处理Element UI表格固定列高度问题 */
::v-deep(.el-table__fixed-right) {
  height: 100% !important;
}

/* 自定义滚动条样式 - 宽度 */
.table-scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 自定义滚动条样式 - 滑块 */
.table-scroll-container::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #ccc;
  transition: background-color 0.2s;
}

/* 自定义滚动条样式 - 滑块悬停效果 */
.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* 自定义滚动条样式 - 轨道 */
.table-scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
